<template>
  <div class="nav-container">
    <el-menu
        router
        :default-active="activeIndex"
        class="nav-menu"
        mode="horizontal"
        :ellipsis="false"
    >
      <!-- Logo区域 -->
      <div class="logo-area" @click="navigateTo('/')">
        <div class="logo-wrapper">
          <img class="logo-img" src="@/assets/NERV.png" alt="NERV Logo" />
        </div>
        <div class="brand-info">
          <h1 class="site-name">图书管理系统</h1>
          <span class="site-subtitle">Book Management</span>
        </div>
      </div>

      <!-- 导航菜单项 -->
      <div class="nav-items">
        <el-menu-item index="/" class="nav-item">
          <div class="nav-content">
            <el-icon class="nav-icon"><House /></el-icon>
            <span class="nav-text">首页</span>
          </div>
        </el-menu-item>

        <el-menu-item index="/borrow" class="nav-item">
          <div class="nav-content">
            <el-icon class="nav-icon"><ShoppingCart /></el-icon>
            <span class="nav-text">我的借阅</span>
          </div>
        </el-menu-item>

        <el-menu-item index="/MyBorrows" class="nav-item">
          <div class="nav-content">
            <el-icon class="nav-icon"><Tickets /></el-icon>
            <span class="nav-text">借阅记录</span>
          </div>
        </el-menu-item>

<!--        <el-menu-item index="/about" class="nav-item">-->
<!--          <div class="nav-content">-->
<!--            <el-icon class="nav-icon"><InfoFilled /></el-icon>-->
<!--            <span class="nav-text">关于</span>-->
<!--          </div>-->
<!--        </el-menu-item>-->
      </div>

      <!-- 右侧空白填充 -->
      <div class="flex-grow"></div>

      <!-- 搜索区域 -->
<!--      <div class="search-area">-->
<!--        <el-input-->
<!--            v-model="searchQuery"-->
<!--            placeholder="搜索图书..."-->
<!--            class="search-input"-->
<!--            clearable-->
<!--            @keyup.enter="handleSearch"-->
<!--        >-->
<!--          <template #suffix>-->
<!--            <el-icon class="search-icon" @click="handleSearch">-->
<!--              <Search />-->
<!--            </el-icon>-->
<!--          </template>-->
<!--        </el-input>-->
<!--      </div>-->

      <!-- 用户相关 -->
      <div class="user-area">
        <el-dropdown v-if="isLoggedIn" class="user-dropdown" trigger="hover">
          <div class="user-profile">
            <el-badge :value="notifications" :hidden="notifications === 0" class="notification-badge">
              <el-avatar :size="36" :src="avatar" class="user-avatar">
                <el-icon v-if="!avatar"><User /></el-icon>
              </el-avatar>
            </el-badge>
            <div class="user-info">
              <span class="user-name">{{ username }}</span>
              <span class="user-role">{{ roleText }}</span>
            </div>
            <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="navigateTo('/userprofile')">
                <el-icon><User /></el-icon>
                <span>个人中心</span>
              </el-dropdown-item>
              <el-dropdown-item v-if="role == 1" @click="navigateTo('/MianLayout')">
                <el-icon><Setting /></el-icon>
                <span>管理中心</span>
              </el-dropdown-item>
              <el-dropdown-item divided @click="showLogoutDialog">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <div v-else class="auth-buttons">
          <el-button class="register-btn" @click="navigateTo('/register')">
            注册
          </el-button>
          <el-button type="primary" class="login-btn" @click="navigateTo('/login')">
            <el-icon><UserFilled /></el-icon>
            <span>登录</span>
          </el-button>
        </div>
      </div>
    </el-menu>

    <!-- 退出确认对话框 -->
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {ElMessageBox, ElMessage} from 'element-plus'
import {
  House, ShoppingCart, Tickets, User, SwitchButton, UserFilled, ArrowDown,
  Setting
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const centerDialogVisible = ref(false)
const activeIndex = ref('/')
const username = ref('游客')
const avatar = ref('')
const role = ref(0)
const searchQuery = ref('')
const notifications = ref(0)
const logoutLoading = ref(false)

// 改进的登录状态检查
const isLoggedIn = computed(() => {
  return username.value !== '游客'
})

// 角色文本
const roleText = computed(() => {
  return role.value == 1 ? '管理员' : '用户'
})

// 初始化用户信息
const initUserInfo = () => {
  const storedUser = sessionStorage.getItem('username');
  const storedRole = sessionStorage.getItem('role');
  const storedAvatar = sessionStorage.getItem('avatar')
  const storedNotifications = sessionStorage.getItem('notifications')

  username.value = storedUser || '游客'
  avatar.value = storedAvatar || '';
  role.value = storedRole || 0;
  notifications.value = parseInt(storedNotifications) || 0;
}

// 更新活动菜单项
const updateActiveIndex = () => {
  activeIndex.value = route.path
}

// 导航到指定路径
const navigateTo = (path) => {
  router.push(path)
}

// 搜索处理
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push(`/search?q=${encodeURIComponent(searchQuery.value)}`)
  }
}

// 显示退出对话框
const showLogoutDialog = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(async () => {
        // 用户点击【确定】，执行退出逻辑

        try {

         await confirmLogout()

          // await logoutApi() // 调用退出接口
          ElMessage.success('退出成功') // 提示退出成功
        } catch (err) {
          ElMessage.error('退出失败') // 提示退出失败
        } finally {
          logoutLoading.value = false
        }
      })
      .catch(() => {
        // 用户点击【取消】
        ElMessage.info('已取消退出') // 提示取消退出
      })
}

// 取消退出
// const cancelLogout = () => {
//   centerDialogVisible.value = false
// }

// 确认退出
const confirmLogout = async () => {
  logoutLoading.value = true

  // 模拟退出请求
  setTimeout(() => {
    navigateTo('/login')
    sessionStorage.clear()
    username.value = '游客'
    avatar.value = '';
    notifications.value = 0
    centerDialogVisible.value = false
    logoutLoading.value = false
  }, 1000)
}

// 监听路由变化
watch(() => route.path, updateActiveIndex)

// 初始化
initUserInfo()
updateActiveIndex()
</script>

<style scoped>
.nav-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.nav-menu {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 32px;
  background: transparent !important;
  border-bottom: none !important;
}

.logo-area {
  display: flex;
  align-items: center;
  margin-right: 48px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo-area:hover {
  transform: scale(1.05);
}

.logo-wrapper {
  position: relative;
  margin-right: 16px;
}

.logo-img {
  height: 48px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brand-info {
  display: flex;
  flex-direction: column;
}

.site-name {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.site-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  margin-top: 2px;
}

.nav-items {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  height: 100%;
  margin: 0;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 3px solid transparent !important;
  position: relative;
  overflow: hidden;
}

.nav-content {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  position: relative;
  z-index: 1;
}

.nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: 0;
}

.nav-item:hover::before {
  transform: scaleX(1);
}

.nav-item:hover {
  color: white !important;
}

.nav-item.is-active {
  color: white !important;
  border-bottom: 3px solid #ffd700 !important;
  background: rgba(255, 255, 255, 0.15);
}

.nav-icon {
  margin-right: 8px;
  font-size: 18px;
}

.nav-text {
  font-size: 15px;
  font-weight: 500;
}

.flex-grow {
  flex-grow: 1;
}

.search-area {
  margin-right: 24px;
}

.search-input {
  width: 300px;
}

.search-input :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  backdrop-filter: blur(10px);
}

.search-input :deep(.el-input__inner) {
  color: white;
  font-size: 14px;
}

.search-input :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.7);
}

.search-icon {
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: color 0.3s;
}

.search-icon:hover {
  color: white;
}

.user-area {
  display: flex;
  align-items: center;
}

.user-dropdown {
  cursor: pointer;
}

.user-profile {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 24px;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-profile:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.notification-badge {
  margin-right: 12px;
}

.user-avatar {
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-info {
  display: flex;
  flex-direction: column;
  margin-right: 8px;
  margin-left: 12px;
}

.user-name {
  color: white;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.user-role {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-top: 2px;
}

.dropdown-icon {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  transition: transform 0.3s;
}

.user-profile:hover .dropdown-icon {
  transform: rotate(180deg);
}

.auth-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.register-btn {
  padding: 8px 20px;
  border-radius: 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  transition: all 0.3s;
}

.register-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

.login-btn {
  padding: 8px 20px;
  border-radius: 20px;
  background: linear-gradient(45deg, #ff6b6b, #ffd93d);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.login-btn .el-icon {
  margin-right: 6px;
}

.logout-dialog-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 0;
}

.warning-icon {
  font-size: 24px;
  color: #f56c6c;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-input {
    width: 250px;
  }
}

@media (max-width: 992px) {
  .nav-menu {
    padding: 0 20px;
  }

  .logo-area {
    margin-right: 24px;
  }

  .site-name {
    font-size: 20px;
  }

  .search-area {
    display: none;
  }

  .nav-content {
    padding: 0 16px;
  }

  .nav-text {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    height: 64px;
    padding: 0 16px;
  }

  .site-subtitle,
  .user-info,
  .nav-text {
    display: none;
  }

  .nav-content {
    padding: 0 12px;
  }

  .nav-icon {
    margin-right: 0;
    font-size: 20px;
  }

  .register-btn {
    display: none;
  }

  .login-btn span {
    display: none;
  }

  .login-btn .el-icon {
    margin-right: 0;
  }

  .logo-img {
    height: 36px;
  }

  .site-name {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .brand-info {
    display: none;
  }

  .logo-area {
    margin-right: 16px;
  }

  .nav-items {
    gap: 4px;
  }

  .nav-content {
    padding: 0 8px;
  }
}
</style>